<template>
    <Card class="card">
        <div class="back">
            <Button route="-1" class="back-button"> <!-- route的值若为数字则表示go(num) -->
                <template #svg>
                    <Back />
                </template>

                <template #info>
                    <p style="line-height: 24px;">返回</p>
                </template>
            </Button>
        </div>
        <div class="titles">
            <div v-for="(item, index) in titles" :key="index" @click="scrollToTitle(item.top)"
                :class="{ active: item.active }">
                {{ item.text }}
            </div>
        </div>
    </Card>
</template>

<script lang="ts" setup>
import Back from '@/assets/svg/Back.vue';
import Button from '@/components/Button/Button.vue';
import Card from '../Card/Card.vue'

//-------------------------获取标题
import { useTitlesStore } from '@/store/titlesStore';
import { storeToRefs } from 'pinia';
const titlesStore = useTitlesStore()    //获取pinia
const { titles } = storeToRefs(titlesStore) //获取标题列表

//-------------------------自动切换标题
import { watch, ref } from 'vue'
import { useScrollStore } from '@/store/scrollStore';
const scrollStore = useScrollStore()   //获取pinia

const { scrollTop } = storeToRefs(scrollStore)
let pointer = ref(0)     //创建指针，表示目前在哪一个标题下，避免重复遍历标题列表

titles.value[0].active = true
const changePointer = (newValue: number) => {  //二分查找pointer应该指向的位置
    let tempPointer = 1 //return是tempPointer-1，为避免指针溢出，初值为1
    for (let i = 0; i < titles.value.length; i++) {      //tempPointer所指向的top依次对比目前的scroll，若比目前的小则指针++，直至tempPointer所指向的top比目前scroll更大
        if (newValue+100 >= titles.value[tempPointer]?.top) { //注意问号符，当视图滚动至最后一个标题时tempPointer可能会指向undefined
            tempPointer++
        }
    }
    return tempPointer - 1
}
let timer: any
watch(scrollTop, (newValue) => {                   //高度变化时，执行函数
    clearTimeout(timer)
    timer = setTimeout(() => {
        pointer.value = changePointer(newValue)
    }, 300);
})
watch(pointer, (newPointer, oldPointer) => {        //将新的pointer所指向的标题active激活，取消旧的
    console.log('pointer变化', newPointer);
    titles.value[newPointer].active = true
    titles.value[oldPointer].active = false
})

//---------------------标题锚点
const scrollToTitle = (target: number) => {
    console.log(target);

    window.scrollTo({
        top: target,
        behavior: 'smooth'
    })
}

</script>

<style lang="scss" scoped>
.card {
    display: flex;
    flex-direction: column;
    background-color: white;
    .back {
        border-bottom: 1px solid $theme-border;

        &-button {
            width: 100%;
            display: flex;
            justify-content: left;
        }
    }

    .titles {
        @extend .card;

        // padding: 8px;
        div {
            text-align: left;
            line-height: $info-line-height;
            // font-size: $title-size;
            padding: 5px;
            cursor: pointer;
            transition: 0.3s;

        }

        div:hover {
            background-color: $hover-bkg;
        }

        .active {
            color: $theme-color;
        }
    }
}
</style>